<!-- 这个组件是全局的导航条, 包括网站logo,搜索框,主页,登录,注册 -->
<template>
    <div class="header-box">
        <header>
            <div class="top">
                <img src="../assets/logo.png" alt="">
                <my-search></my-search>
            </div>
        </header>
        <div class="nav-box" 
            :style="{position: pos}" 
            :class="{fix: pos=='fixed'}"
        >
            <nav>
                <router-link to="/">首页</router-link>
                <template v-if="!token">
                    <router-link to="/login">登录</router-link>
                    <router-link to="/register">注册</router-link>
                </template>
                <template v-else>
                    <router-link to="/shopCar">购物车</router-link>
                    <a href="#" @click="logout">退出登录</a>
                </template>
                <my-search v-show="pos=='fixed'" class="search"></my-search>
            </nav>
        </div>
    </div>
</template>
<script>

    import { mapState } from "vuex"
    import mySearch from '@/components/MySearch'
    export default {
        data() {
            return {
                // 搜索框输入的搜索关键字
                input: "",
                // 导航条的定位方式
                pos: "static"
            }
        },
        components: {
            mySearch
        },
        computed: {
            ...mapState(["token"])
        },
        mounted() {
            // 滚动监听
            window.onscroll = () => {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                if (scrollTop > 100) {
                    this.pos = "fixed";
                } else {
                    this.pos = "static"
                }
            }
        },
        methods: {
            // 退出登录
            logout(){
                // 清空状态管理中的token值, 即可退出登录
                this.$store.commit("setToken","");
                this.$message({
                    type:"success",
                    message:"退出成功"
                })
                // 如果当前是购物车页,则跳到主页
                console.log(this.$route.path)
                if(this.$route.path == "/shopCar"){
                    this.$router.push('/')
                }
            }
        },
    }
</script>
<style scoped>
    .header-box {
        box-shadow: 0 2px 6px #999;
        padding-top: 20px;
        margin-bottom: 10px;
        height: 140px;
    }

    header {
        width: 1200px;
        margin: auto;
        text-align: left;
    }

    img {
        width: 188px;
    }

    .top {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .search {
        position: absolute;
        right: 0;
        top: -10px;
    }

    .nav-box {
        padding: 20px 0;
    }

    nav {
        width: 1200px;
        margin: auto;
        text-align: left;
        position: relative;
    }

    nav a {
        margin: 20px;
        padding: 0 10px 4px;
        font-weight: bold;
        text-decoration: none;
        color: black;
    }

    /* 当路由跳转时,会在当前路由对应的a标签上自动添加 router-link-exact-active 这个class值, 所以直接用这个class值设置样式即可实现路由跳转对应a链接样式切换 */
    nav a:hover,
    .router-link-exact-active {
        color: #800080 !important;
        border-bottom: 2px solid #800080;
    }

    .fix {
        box-shadow: 0 2px 6px #999;
        background-color: white;
        width: 100%;
        top: 0;
        z-index: 1000;
    }

    .back-top {
        position: fixed;
        right: 100px;
        bottom: 100px;
        background: purple;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
        line-height: 20px;
        color: white;
        width: 46px;
        transition: all .3s;
        cursor: pointer;
        opacity: 0.8;
    }

    .back-top:hover {
        opacity: 1;
    }
</style>